<!-- 学社 - 学习成长 - 发布 -->
<template>
  <view>
    <z-navbar title="发布" :border-bottom="true"></z-navbar>
    <view class="pb-20 pt-2 px-4">
      <!-- 标签栏 -->
      <u-tabs bg-color="none" :is-scorll="false" :list="tabList" bar-height="6" bar-width="30" active-color="#333"
        inactive-color="#999" font-size="32" :active-item-style="tabActiveStyle" :bar-style="barStyle"
        v-model="state.tabCurrent" @change="onTabChange"></u-tabs>
      <!-- 添加按钮 -->
      <view class="flex flex-wrap">
        <view class="btn mr-2 mt-3"
          @click="navigate(`/package_society/pages/member/list?&showCheck=true&club_id=${state.club_id}&call_ids=${state.call_ids}&fromType=work`)">
          @社团成员
        </view>
        <view v-for="(item, index) in state.memberList" :key="index" class="btn mr-2 mt-3">
          <view class="mr-2">{{ item.user?.nickname }}</view>
          <image class="w-26 h-26" src="/static/images/home/ic_delete_round.png" @click="onDelete(index)" />
        </view>
      </view>
      <!-- 主体 -->
      <u-line color="#E5E5E5" margin="20rpx 0 0" />
      <view class="relative mb-3">
        <image class="absolute top-34 left-0 w-28 h-24 z-2" src="/static/images/home/ic_edit.png"></image>
        <u-input v-model="state.content" type="textarea" height="240" auto-height placeholder="添加补充说明(选填)"
          :maxlength="state.maxInputNum" placeholder-style="color: #999; fontSize: 24rpx" :custom-style="inputStyle" />
        <view class="absolute bottom-30 right-0 z-2 c-#999 text-24">{{ enteredNum }}/{{ state.maxInputNum }}</view>
        <u-line color="#E5E5E5" />
      </view>
      <template v-if="state.tabCurrent == 0">
        <!-- 课程列表 -->
        <view v-for="(item, index) in state.courseList" :key="index" class="py-2 item" @click="onDeleteCourse(index)">
          <image class="w-32 h-32 mr-3" src="/static/images/home/ic_delete_course.png"></image>
          <u-image class="mr-2" width="240" height="160" border-radius="12" :src="item.cover_image"></u-image>
          <view class="flex-1 flex flex-col justify-between h-160 text-single">
            <view class="c-#333 text-28 font-bold text-single">{{ item.class_name }}</view>
            <view>
              <view class="c-#B5B5B5 text-24 text-single mb-1">{{ item.desc }}</view>
              <view class="flex">
                <view class="flex-1 flex items-center text-single">
                  <u-image width="32" height="32" shape="circle" :src="item.teacher_image" />
                  <view class="c-#999 text-26 text-single ml-1">{{ item.teacher_name }}</view>
                </view>
              </view>
            </view>
          </view>
        </view>
      </template>
      <template v-if="state.tabCurrent == 1">
        <!-- 试题 -->
        <view v-for="(item, index) in state.examList" :key="index">
          <view class="relative py-2 pl-2 bg-#F5F5F5 h-122 flex items-center mb-4">
            <image class="absolute z-2 w-72 h-50 right-0 top-0" src="/package_society/static/images/ic_delete_exam.png"
              @click="onDeleteExam(index)"></image>
            <u-image class="mr-2" width="92" height="92" border-radius="12"
              src="/package_society/static/images/img_cover_exam.png"></u-image>
            <view class="max-width-80 text-single ml-4 mr-11 c-#666 text-28">{{ item.paper_name }}</view>
          </view>
          <view class="c-#666 text-28 flex mb-3">
            <view class="flex-shrink-0">考试类目：</view>
            <view class="flex-1 text-single">{{ item.category }}</view>
          </view>
          <view class="c-#666 text-28 flex mb-3">
            <view class="flex-shrink-0">考试题目名称：</view>
            <view class="flex-1 text-single">{{ item.paper_name }}</view>
          </view>
          <view class="c-#666 text-28 mb-3">选择题数：{{ item.single_number + item.multiple_number }}</view>
          <view class="c-#666 text-28 mb-3">满分：{{ item.total_score }}</view>
          <view class="c-#666 text-28 mb-3">及格分：{{ item.pass_score }}</view>
          <view class="c-#666 text-28">考试时长：{{ item.duration }}</view>
        </view>
      </template>
    </view>
    <view class="bg-white bottom-wrap-16">
      <u-line color="#eee" />
      <view class="flex justify-center">
        <view v-if="state.tabCurrent == 0" class="btn-add w-330"
          @click="navigate(`/package_society/pages/course/select?club_id=${state.club_id}&type=work&course_ids=${state.course_ids}`)">添加课程({{
            addCourseNum }})</view>
        <view v-if="state.tabCurrent == 1" class="btn-add w-330"
          @click="navigate(`/package_society/pages/exam/select?club_id=${state.club_id}`)">选择试题</view>
        <view class="btn-submit w-330 mr-0" @click="onSubmit">发布</view>
      </view>
    </view>
  </view>
</template>

<script setup>
import { navigate, showToast } from '@/common/util/uni'
import { postWorkPublishClass, postWorkPublishExam } from '@/common/http/module/society.js'

const state = reactive({
  maxInputNum: 500,
  content: '',
  memberList: [], // 已选择的成员列表
  call_ids: [], // 已选择成员id集合
  courseList: [], // 已选择的课程列表
  course_ids: '', // 课程id集合
  class_id: [], // 已选择课程id集合
  category: '', // 考试分类
  examList: [], // 试题
  tabCurrent: 0,
})
const tabList = [
  { name: '课程' },
  { name: '考试' }
]
const barStyle = {
  // color
  backgroundColor: '#F4AF22'
}
const tabActiveStyle = {
  color: '#333333'
}

const enteredNum = computed(() => {
  return state.content.length > 500 ? 500 : state.content.length
})

const inputStyle = {
  backgroundColor: '#fff',
  padding: '32rpx 0 60rpx 48rpx'
}

// 添加课程数量
const addCourseNum = computed(() => state.courseList.length)

// tab切换
function onTabChange () { }

// 接收成员列表
function onAccepMember (members) {
  console.log('接收成员', members);
  state.memberList = members
  state.call_ids = members.map(v => v.user_id)
}

// 删除成员
function onDelete (i) {
  state.memberList.splice(i, 1)
  state.call_ids = state.memberList.map(v => v.user_id)
}

// 接收课程
function onAcceptCourse (courses) {
  console.log('接收课程', courses);
  state.courseList = courses
  state.course_ids = state.courseList.map(v => v.id).join(',')
}

// 删除课程
function onDeleteCourse (i) {
  state.courseList.splice(i, 1)
  state.course_ids = state.courseList.map(v => v.id).join(',')
}

// 接收试题
function onAcceptExam (exam) {
  console.log('接收考试', exam);
  state.examList = [exam]
}

// 删除课程
function onDeleteExam (i) {
  state.examList.splice(i, 1)
}

// 发布
function onSubmit () {
  // if (state.memberList.length == 0) {
  //   showToast('请选择成员', 'error')
  //   return
  // }
  // 课程
  if (state.tabCurrent == 0) {
    if (state.courseList.length == 0) {
      showToast('请添加课程', 'error')
      return
    }
    postWorkPublishClass({
      class_id: state.courseList.map(v => v.id).join(','),
      club_id: state.club_id,
      call_ids: state.call_ids.join(','),
      remark: state.content
    }).then(() => {
      showToast('发布成功')
      setTimeout(() => {
        navigate(`/package_society/pages/society/index?tabId=4&club_id=${state.club_id}`)
      }, 600);
    })
  }
  // 考试
  if (state.tabCurrent == 1) {
    if (state.examList.length == 0) {
      showToast('请添加考试', 'error')
      return
    }
    postWorkPublishExam({
      exam_id: state.examList[0].id,
      club_id: state.club_id,
      call_ids: state.call_ids.join(','),
      remark: state.content
    }).then(() => {
      showToast('发布成功')
      setTimeout(() => {
        navigate(`/package_society/pages/society/index?tabId=4&club_id=${state.club_id}`)
      }, 600);
    })
  }
}

function loadData () {
  // const { data } = await getCurriculumClaimList(state.club_id, state.category_id)
  // state.list = data.data
}

onLoad(options => {
  state.club_id = options.club_id
  loadData()
})

defineExpose({ onAccepMember, onAcceptCourse, onAcceptExam })
</script>

<style lang="scss" scoped>
.btn {
  display: flex;
  justify-content: center;
  align-items: center;
  padding: 20rpx 32rpx;
  background-color: #F6F6F6;
  border-radius: 12rpx;
  color: #F4AF22;
  font-size: 28rpx;
}

.btn-add {
  margin-top: 12rpx;
  display: flex;
  justify-content: center;
  align-items: center;
  border: 2rpx solid #F4AF22;
  border-radius: 12rpx;
  color: #F4AF22;
  font-size: 28rpx;
}

.item {
  display: flex;
  align-items: center;
  border-bottom: 2rpx solid #F6F6F6;
}

:deep(.u-tabs) {
  padding: 0 60rpx;
  width: 100% !important;
}

:deep(.u-scroll-box) {
  display: flex;
}

:deep(.u-tab-item) {
  flex: 1;
}

.bar {
  margin-top: -8rpx;
}
</style>

